
<template>
  <div id="app">
    <div id="allmap"></div>
    <!-- <div v-if="show==true"  class="show">我是弹出层</div> -->
  </div>
</template>
 
<script>

import BMap from "BMap";
import BMapLib from 'BMapLib';

// import {MarkerClusterer} from '../tool/MarkerClusterer_min'
import oldhouseApi from "@/api/oldhouse";
export default {
  name: "houseMap",
  data() {
    return {
      defaultX: 120.705851,
      defaultY: 28.008941,
      defaultZoom: 15,
      map: {},
    };
  },
  methods: {
    showMapMarker(xys, map) {
      let markers = [];
      let pt = null;
      for (let i in xys) {
        pt = new BMap.Point(xys[i].x, xys[i].y);
        markers.push(new BMap.Marker(pt));
      }
      // 地图上覆盖物的聚合效果
      let markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
        girdSize: 100,
        styles: [
          {
            background: "rgba(12,181,106,0.9)",
            size: new BMap.Size(92, 92),
            textSize: "16",
            textColor: "#fff",
            borderRadius: "true",
          },
        ],
      });
      markerClusterer.setMaxZoom(50);
      markerClusterer.setGridSize(50);
    },

    showInfo() {
      let cp = this.map.getCenter();
      let zoom = this.map.getZoom(); //缩放级别
      // console.log(cp.lng + "," + cp.lat+" --> " + zoom);
      oldhouseApi.queryMapHouse(cp.lng, cp.lat, zoom).then((result) => {
        let xys = result.data.MapHouseData.list;
        this.showMapMarker(xys, this.map);
      });
    },
  },
  mounted: function () {
    this.map = new BMap.Map("allmap"); //初始化map, 绑定id=allmap
    var point = new BMap.Point(this.defaultX, this.defaultY); // 初始化point, 给定一个默认x,y值
    this.map.centerAndZoom(point, this.defaultZoom); // 将point点放入map中，展示在页面中心展示，10=缩放程度
    this.map.enableScrollWheelZoom(); // 开启滚动鼠标滑轮
    this.map.addControl(new BMap.MapTypeControl());
    // 设置地图缩放
    this.map.addControl(
      new BMap.ScaleControl({
        anchor: window.BMAP_NAVIGATION_CONTROL_ZOOM,
      })
    );
    // 设置地图导航
    this.map.addControl(
      new BMap.NavigationControl({
        enableGeolocation: true,
      })
    );
    // 设置缩略图控件。
    this.map.addControl(new BMap.OverviewMapControl());
    // 设置地图显示的城市 此项是必须设置的
    this.map.setCurrentCity("温州");
    // 开启鼠标滚轮缩放
    this.map.enableScrollWheelZoom(true);

    this.showInfo();

    this.map.addEventListener("dragend", this.showInfo); //拖动结束事件
    this.map.addEventListener("zoomend", this.showInfo); //缩放结束事件
    this.map.addEventListener("dragstart", () => {
      this.map.clearOverlays();
    }); //拖动开始事件
    this.map.addEventListener("zoomstart", () => {
      this.map.clearOverlays();
    }); //缩放开始事件

    oldhouseApi
      .queryMapHouse(this.defaultX, this.defaultY, this.zoom)
      .then((result) => {
        let xys = result.data.MapHouseData.list;
        showMapMarker(xys, this.map);
      });
  },
};
</script>
 
<style>

#allmap {
  height: 800px;
  overflow: hidden;
}
/* .show {
  border: 1px solid black;
  height: 200px;
  position: absolute;
  bottom: 0;
  background-color: white;
  left: 0;
  width: 100%;
  padding: 10px;
} */
</style>
